@import "../global";

#site {
  .main {
    .site-list {
      .site-item {
        padding: 15px;
        border-bottom: 1px solid #e6e6e6;
        .site-img {
          width: 470px;
          height: 250px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .site-content {
          padding: 10px;
          height: 250px;
          overflow: hidden;
          .content {
            width: 66.6%;
            padding: 0 40px;
            font-size: 18px; color: #999999; line-height: 28px;
            h3 { font-size: 24px; line-height: 44px; margin: 0;}
            //p { font-size: 18px; color: #999999; line-height: 28px;}
            p {
              height: 84px;
              text-overflow:ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
            .time-line {
              display: flex;
              justify-content: space-between;
              flex-direction: row;
              position: relative;
              margin-top: 80px;
              &:before {
                content: '';
                position: absolute;
                top: -20px;
                left: 12px;
                right: 12px;
                height: 2px;
                background: #e6e6e6;
              }
              .rate-line {
                position: absolute;
                top: -20px;
                left: 12px;
                height: 2px;
                z-index: 2;
                background: #0a83d7;
              }
              .stage {
                position: relative;
                &.active:before {
                  background: #0a83d7;
                }
                &:before {
                  content: '';
                  position: absolute;
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background: #e6e6e6;
                  top: -26px;
                  left: 50%;
                  transform: translateX(-50%);
                }
              }
            }
          }
          .action {
            width: 33.3%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 250px;
          }
        }
      }
    }
  }
}
